<template>
  <!-- <n-card :bordered="false" class="proCard">
    <BasicTable
      title="表格列表"
      titleTooltip="这是一个提示"
      :columns="columns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="actionRef"
      :actionColumn="actionColumn"
      :scroll-x="1360"
      @update:checked-row-keys="onCheckedRow"
    >
      <template #toolbar>
        <n-button type="primary" @click="reloadTable">刷新数据</n-button>
      </template>
    </BasicTable>
  </n-card> -->
  <div>
    <div>
      <n-space vertical>
        <n-select id="select" v-model:value="value" :options="options" @update:value="change1" />
      </n-space>
    </div>
    <div>
      <n-table :bordered="false" :single-line="false">
        <thead>
          <tr align="center">
            <th>标题</th>
            <th>描述</th>
            <th>内容</th>
            <th>创建者</th>
            <th>创建时间</th>
            <th>是否已处理</th>
            <th>文件状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in itmes" :key="item.id" align="center">
            <td>{{ item.title }}</td>
            <td>{{ item.description }}</td>
            <td>{{ item.content }}</td>
            <td>{{ item.creator }}</td>
            <td>{{ format(new Date(item.createtime), 'yyyy-MM-dd HH:mm:ss') }}</td>

            <!-- <td>{{ dayjs(item.creatime).format('YYYY-MM-DD HH:mm:ss') }}</td> -->
            <td>{{ item.processed }}</td>
            <td>{{ item.status == 0 ? '未审批' : item.status == 1 ? '已通过' : '未通过' }}</td>
            <td>
              <NButton @click="agree(item)">同意</NButton>
              <NButton @click="refuse(item)">拒绝</NButton>
            </td>
          </tr>
        </tbody>
      </n-table>
    </div>
    <!-- <n-button @click="getItme">refresh</n-button> -->
  </div>
</template>

<script lang="ts" setup>
  import { http } from '@/utils/http/axios';
  import { NButton } from 'naive-ui';
  import { ref } from 'vue';

  import { format } from 'date-fns';

  const value = ref('every');
  const options = [
    {
      label: '所有',
      value: 'every',
    },
    {
      label: '已通过',
      value: 1,
    },

    {
      label: '未通过',
      value: 2,
    },
    {
      label: '未审批',
      value: 0,
    },
  ];
  const arr: Array<any> = [];
  const itmes: any = ref([
    //   {title:'1231',
    //   description:1,
    //   content:'1',
    //   creator:'1231',
    //   creatime:1,
    //   workflow:2003-12-2,
    //   processed:'1',
    //   status:200,
    // },  {title:'1231',
    //   description:1,
    //   content:'1',
    //   creator:'1231',
    //   creatime:1,
    //   workflow:2003-12-2,
    //   processed:'1',
    //   status:200,
    // },
    // {title:'1231',
    //   description:1,
    //   content:'1',
    //   creator:'1231',
    //   creatime:1,
    //   workflow:2003-12-2,
    //   processed:'1',
    //   status:200,
    // },
  ]);

  // console.log(1);

  // import { reactive, ref, h } from 'vue';
  // import { BasicTable, TableAction } from '@/components/Table';
  // import { getTableList } from '@/api/table/list';
  // import { columns } from './basicColumns';
  // import { useDialog, useMessage } from 'naive-ui';
  // import { DeleteOutlined, EditOutlined } from '@vicons/antd';
  type FormState = {
    code: Number;
    message: String;
    result: Array<any>;
  };
  const getItme = async () => {
    const a = await http.request<any>({ url: '/document', method: 'GET' });
    // console.log(a);
    for (let i = 0; i < a.length; i++) {
      arr.push(a[i]);
      // console.log(a[i]);
    }
    // console.log(a.length);
    // console.log(itmes);
    console.log(arr);
    itmes.value = arr;
    return a;
  };
  // // const itmes = getItme();
  getItme();

  const agree = async (item: any) => {
    // console.log(item);

    const a = await http.request<FormState>({
      url: '/document/modify',
      method: 'put',
      data: {
        id: item.id,
        title: item.title,
        description: item.description,
        content: item.content,
        creator: item.creator,
        processed: '是',
        status: '1',
      },
    });
    console.log(a);
    location.reload();
  };
  const refuse = async (item: any) => {
    const a = await http.request<FormState>({
      url: '/document/modify',
      method: 'put',
      data: {
        id: item.id,
        title: item.title,
        description: item.description,
        content: item.content,
        creator: item.creator,
        processed: '是',
        status: '2',
      },
    });
    console.log(a);
    location.reload();
  };

  const change1 = (value: number | string): any => {
    // console.log(value);
    if (value == 'every') {
      itmes.value = [];
      itmes.value = arr;
      console.log(itmes);
    } else if (value == 1) {
      itmes.value = [];
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].status == 1) {
          itmes.value.push(arr[i]);
        }
      }
    } else if (value == 2) {
      itmes.value = [];
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].status == 2) {
          itmes.value.push(arr[i]);
        }
      }
    } else if (value == 0) {
      itmes.value = [];
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].status == 0) {
          itmes.value.push(arr[i]);
        }
      }
    }
  };
  // console.log(getItme());

  // const message = useMessage();
  // const dialog = useDialog();
  // const actionRef = ref();

  // const params = reactive({
  //   pageSize: 5,
  //   name: 'xiaoMa',
  // });

  // const actionColumn = reactive({
  //   width: 150,
  //   title: '操作',
  //   key: 'action',
  //   fixed: 'right',
  //   align: 'center',
  //   render(record) {
  //     return h(TableAction as any, {
  //       style: 'text',
  //       actions: createActions(record),
  //     });
  //   },
  // });

  // function createActions(record) {
  //   return [
  //     {
  //       label: '删除',
  //       type: 'error',
  //       // 配置 color 会覆盖 type
  //       color: 'red',
  //       icon: DeleteOutlined,
  //       onClick: handleDelete.bind(null, record),
  //       // 根据业务控制是否显示 isShow 和 auth 是并且关系
  //       ifShow: () => {
  //         return true;
  //       },
  //       // 根据权限控制是否显示: 有权限，会显示，支持多个
  //       auth: ['basic_list'],
  //     },
  //     {
  //       label: '编辑',
  //       type: 'primary',
  //       icon: EditOutlined,
  //       onClick: handleEdit.bind(null, record),
  //       ifShow: () => {
  //         return true;
  //       },
  //       auth: ['basic_list'],
  //     },
  //   ];
  // }

  // const loadDataTable = async (res) => {
  //   return await getTableList({ ...params, ...res });
  // };

  // function onCheckedRow(rowKeys) {
  //   console.log(rowKeys);
  // }

  // function reloadTable() {
  //   actionRef.value.reload();
  // }

  // function handleDelete(record) {
  //   console.log(record);
  //   dialog.info({
  //     title: '提示',
  //     content: `您想删除${record.name}`,
  //     positiveText: '确定',
  //     negativeText: '取消',
  //     onPositiveClick: () => {
  //       message.success('删除成功');
  //     },
  //     onNegativeClick: () => {},
  //   });
  // }

  // function handleEdit(record) {
  //   console.log(record);
  //   message.success('您点击了编辑按钮');
  // }
</script>

<style lang="less" scoped></style>
